<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>待办事项</title>
		<link rel="stylesheet" href="js.css" />
	</head>
	<body>
		<div class="container">
			<div class="header">
				<h1>待办事项</h1>
				<p>简单高效地管理你的任务</p>
			</div>

			<div class="input-section">
				<input
					type="text"
					class="todo-input"
					placeholder="添加新的待办事项..."
				/>
				<button class="add-btn">+ 添加</button>
			</div>

			<div class="filter-section">
				<button class="filter-btn active" data-filter="all">全部</button>
				<button class="filter-btn" data-filter="active">未完成</button>
				<button class="filter-btn" data-filter="completed">已完成</button>
			</div>

			<div class="todo-list">
				<!-- 待办事项将在这里动态生成 -->
				<div class="empty-state">
					<p>暂无待办事项</p>
					<p>添加一个新任务开始吧</p>
				</div>
			</div>

			<div class="footer">
				<span class="stats">0个未完成，0个总计</span>
			</div>
		</div>
		<script src="home.js"></script>
	</body>
</html>
